<template>
	<div class="card rdsp-card-view" data-page="maintainceEquipHidden">
		<div class="card-content card-content-padding" id="maintainceEquipHiddenCard">
			<div class="maintaince-card-title">
				<!-- <span class="icon"></span>  -->
				<span>隐患整改</span>
			</div>
			<div class="maintaince-card-title maintaince-card-info">
				<!-- <span class="icon"></span> 
				<span>隐患整改</span>  -->
				<span class="number">总数
					<label id="totalNum" style="color: #2E76CA; margin-left: 10px;">-</label>
				</span>
				</div>
			<!-- <div data-pagination='{"el": ".swiper-pagination"}' data-space-between="50"
				class="swiper-container swiper-init maintaince-swiper" id="maintainceSwiperContainer">
				<div class="swiper-pagination"
				 id="maintainceSwiper_pagination"
				 style="bottom: 0"></div>
				<div class="swiper-wrapper" id="maintainceSwiper"></div>
			</div> -->
			<div class="swiper-container maintaince-swiper" id="maintainceSwiperContainer">
				<div class="swiper-wrapper" id="maintainceSwiper">
				</div>
				<!-- <div class="swiper-button-prev"></div> -->
				<!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
				<!-- <div class="swiper-button-next"></div> -->
				<!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
				<div class="swiper-pagination"></div>
				<!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
			</div>
		</div>
	</div>
	</div>
</template>
<style scoped>
	.maintaince-card-info{
		height: 25px;
		line-height: 25px;
	}
	.maintaince-desc{
		word-break: break-word;
		overflow-x: hidden;
        overflow-y: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       color: #999999; 
       padding-top: 5px;
	   
	}
	   .maintaince-card-img{
		   display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
	   }
</style>
<script>
	return {
		data: function () {
			return {
				pageIndex: 0,
				pageSize: 25,
				categoryId: 0, //全部类别
				gradeId: 0, //全部等级
				selectContent: '', //搜索内容
				startTimeStr: "",
				endTimeStr: "",
				orgIds: userInfor.organizationIds,
			}
		},
		methods: {
			getHidDangerList: function () {
				var self = this;
				$("#maintainceSwiperContainer").show();
				jQuery("#maintainceSwiper").empty();
				Dao.getHidDangerList({
					orgIds: single_Orgid_wbdw, //隐患单位
					queryType: 0,
					timeType: 2,
					pageIndex: self.pageIndex,
					pageSize: self.pageSize,
					startTime: self.startTimeStr,
					endTime: self.endTimeStr,
					status: 4,
				}, function (data) {
					if (data && data.length > 0) {
						for (var i = 0; i < data.length; i++) {
							var statusStr = '';
							if (data[i].status == 1) {
								statusStr = "整改中";
							} else if (data[i].status == 3) {
								statusStr = "审核中";
							} else if (data[i].status == 5) {
								statusStr = "待指派";
							} else {
								statusStr = "";
							}
							let img = "";
							let src = ''
							if (data[i].picUrls) {
								img = data[i].picUrls.split(",")[0]
							} else {
								img = picNo();
							}
							jQuery("#totalNum").html(data.length);

							if(img.substring(img.length-3) == 'mp4' || img.substring(img.length-3) == 'mov' || img.substring(img.length-3) == '3gp' || img.substring(img.length-4) == 'mpeg' || img.substring(img.length-3) == 'flv' || img.substring(img.length-6) == 'mavip4'){
								src = staticPath + 'img/common/video_list.png'
							}else{
								src = img
							}
							var html = `<div class="swiper-slide" 
							      style="padding-bottom: 20px">
									<div class="maintaince-card-img" id="maintainceCardImg_`+data[i].id+`">
										<img src="` + src + `" alt="` + img + `" height="170px"">
									</div>
									<div class="maintaince-card-bottom">
										<div>
											<span>` + data[i].gradeName + `</span>
											<div class="maintaince-status">` + statusStr + `</div>
										</div>
										<span title="` + data[i].hiddenDangerDesc + `" class="maintaince-desc">` + data[i].hiddenDangerDesc + `</span>
									</div>
							</div>`;
							jQuery("#maintainceSwiper").append(html);

							var swiper = app.swiper.get('#maintainceSwiperContainer');
							swiper.update(true); // 更新滑块

							jQuery("#maintainceCardImg_"+data[i].id).click(function(){
								let indexImg = jQuery(this).children()[0].alt;
								let arrImg = [];
								jQuery.each(jQuery(".maintaince-card-img"),function(index,val){
									arrImg.push(jQuery(val).children()[0].alt);
								});
								let index = arrImg.indexOf(indexImg);
								openAndShowBigImage(arrImg,index);
							});
						}
						app.lazy.create(".maintaince-card-img");

						//滑块只展示6个
						let swaiperList = jQuery("#maintainceSwiper_pagination").children();
						if(swaiperList.length > 6){
							let saveList = jQuery("#maintainceSwiper_pagination .swiper-pagination-bullet").slice(0,6);
							jQuery("#maintainceSwiper_pagination").empty().append(saveList);
						}
						
					} else {
						$("#maintainceSwiperContainer").hide();
						$("#maintainceEquipHiddenCard").append(`<div class="no-data-img"><img src="` +listNoDataPic() + `"/></div>`);
					}
				});
			},
			/*初始化滑块*/
			htmlPage: function() {
				var mySwiper = new Swiper('.swiper-container',{
					pagination: {
						el: '.swiper-pagination',
						dynamicBullets: true,
					},
				});
			}
		},
		on: {
			pageAfterIn: function (e, page) {
				var self = this;

				self.htmlPage();
				self.getHidDangerList();
			}
		}
	}
</script>